<template>
  <GoBack />
  <div style="user-select: none">
    <div class="header">
      <a-row justify="center">
        <a-col :xs="22" :lg="16" :xl="15" :xxl="13">
          <div class="subject">
            <span>问题详情</span>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-divider><fire-filled style="color: red; font-size: 16px"/></a-divider>
    <div>
      <a-row justify="center">
        <a-col :xs="22" :lg="16" :xl="15" :xxl="13">
          <div class="problem-pad">
            <div class="pad-header">
              <span class="op op-color" @click="showAns">解析</span>
            </div>
            <div class="problem" :style="{ boxShadow: ansResultColor }">
              <div class="qus-info">
                <a-tag color="purple">{{ qus.type }}</a-tag>
                <a-tag color="green">{{ qus.year }} 第{{ qus.number }}题</a-tag>
                <check-circle-filled style="color: #2ecc71"/>
                <span>{{ qus.acc }}%</span>
                <edit-filled style="color: #34495e"/>
                <span>{{ qus.try }}</span>
              </div>
              <div class="qus-info">
                <a-tag color="cyan" v-for="(v, idx) in qus.tag" :key="idx">{{v}}</a-tag>
              </div>
              <ShowProblem :content="qus.question"/>
              <div class="choice">
                <a-radio-group button-style="solid" v-model:value="curChoice">
                  <a-radio-button value="A">A</a-radio-button>
                  <a-radio-button value="B">B</a-radio-button>
                  <a-radio-button value="C">C</a-radio-button>
                  <a-radio-button value="D">D</a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <a-divider><bulb-filled style="font-size: 1.5em; color: #f1c40f"/></a-divider>
            <div class="answer" v-for="(ans, idx) in qus.answer" :key="idx" v-show="isShowAns">
              <div class="provider">
                <copyright-circle-outlined style="color: #9b59b6"/>
                <span>{{ ans.author }}</span>
              </div>
              <ShowProblem :content="ans.content"/>
            </div>
          </div>
          <div v-show="isShowAns" style="margin-top: 50px">
            <a-divider><comment-outlined style="font-size: 1.5em; color: #45e87f"/></a-divider>
            <OuterComment :uname="uname" :pid="qus.id"></OuterComment>
          </div>
        </a-col>
      </a-row>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts">
import { Col, Divider, Radio, Row, Tag } from 'ant-design-vue'
import {
  BulbFilled,
  CheckCircleFilled,
  CopyrightCircleOutlined,
  CommentOutlined,
  EditFilled,
  FireFilled
} from '@ant-design/icons-vue'
import { defineComponent, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import ShowProblem from '@/components/ShowProblem.vue'
import { createDefaultQusItem, QusItem, transUrl } from '@/utils/ds'
import { getTargetQus } from '@/service'
import { decodeCT, decodeID, decodeValue, getUserName } from '@/utils/check'
import { AnsFieldSeq, AnsSeq } from '@/utils/constants'
import Footer from '@/components/Footer.vue'
import GoBack from '@/components/GoBack.vue'
import OuterComment from '@/components/OuterComment.vue'
interface RawQus {
  ct: string,
  rt: string,
  lk: string
}

export default defineComponent({
  name: 'QusDetail',
  components: {
    ShowProblem,
    OuterComment,
    FireFilled,
    CheckCircleFilled,
    CommentOutlined,
    EditFilled,
    BulbFilled,
    CopyrightCircleOutlined,
    ARow: Row,
    ACol: Col,
    ADivider: Divider,
    ATag: Tag,
    ARadioGroup: Radio.Group,
    ARadioButton: Radio.Button,
    Footer,
    GoBack
  },
  setup () {
    const route = useRoute()
    const uname = ref<string>('K')
    const curChoice = ref<string>('')
    const qus = ref<QusItem>(createDefaultQusItem())
    const isShowAns = ref<boolean>(false)
    const enabledShowAns = ref<boolean>(false)

    const loadedQus = ref<RawQus[]>([])

    const ansRightColor = ref<string>('rgba(20, 220, 53, 0.8) 0 3px 8px')
    const ansWrongColor = ref<string>('rgba(215, 26, 26, 0.5) 0 3px 8px')
    const ansResultColor = ref<string>('')

    const decodeCurrentQus = (idx: number) => {
      const loaded = loadedQus.value
      const qusRaw = loaded[idx]
      const key = decodeID(qusRaw.lk)
      const header = decodeValue(qusRaw.rt, key)
      const content = decodeCT(header, qusRaw.ct, key)
      if (content === undefined) {
        return
      }

      const e = qus.value
      let v = content.get('id')
      e.id = v === undefined ? 0 : parseInt(v)

      v = content.get('year')
      e.year = v === undefined ? '' : v

      v = content.get('number')
      e.number = v === undefined ? 1 : parseInt(v)

      v = content.get('question')
      if (v !== undefined) {
        v = transUrl(v)
        e.question = v
      } else {
        e.question = ''
      }

      v = content.get('tag')
      e.tag = v === undefined ? [] : v.split('#')

      v = content.get('type')
      e.type = v === undefined ? '408' : v

      v = content.get('subject')
      e.subject = v === undefined ? 'Unknown' : v

      v = content.get('choice')
      e.choice = v === undefined ? 'X' : v

      v = content.get('answer')
      if (v !== undefined) {
        // v = v.replace(PORT_PAT, '')
        // v = v.replace(URL_PAT, IMG_HOST)
        v = transUrl(v)
        const ansList = v.split(AnsSeq)
        e.answer.length = 0
        ansList.forEach(value => {
          const a = value.split(AnsFieldSeq)
          if (a[1] === '影峰') {
            a[1] = 'GY'
          }
          e.answer.push({ content: a[0], author: a[1] })
        })
      } else {
        e.answer = []
      }

      v = content.get('acc')
      e.acc = v === undefined ? 0 : parseInt(v)

      v = content.get('try_')
      e.try = v === undefined ? 0 : parseInt(v)
    }

    const triggerLoadQus = (requestId: number[], queryIdx:number) => {
      // 加载题目
      getTargetQus(requestId)
        .then((response) => {
          if (response.status === 200) {
            const resp = response.data
            if (resp.code !== 0 || resp.data === null) {
              return
            }
            const data: Array<RawQus> = resp.data
            if (queryIdx < loadedQus.value.length) {
              loadedQus.value[queryIdx] = data[0]
            } else {
              data.forEach(e => {
                loadedQus.value.push(e)
              })
            }
            decodeCurrentQus(queryIdx)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const showAns = () => {
      if (isShowAns.value) {
        return
      }
      isShowAns.value = true
      const ans = qus.value.choice.toUpperCase()
      if (curChoice.value === ans) {
        ansResultColor.value = ansRightColor.value
      } else {
        ansResultColor.value = ansWrongColor.value
      }
    }

    onMounted(() => {
      const qusId = route.params.id as string
      triggerLoadQus([parseInt(qusId)], 0)
      uname.value = getUserName()
    })

    watch(curChoice, (curChoice) => {
      if (!enabledShowAns.value && curChoice !== '') {
        enabledShowAns.value = true
      }
    })

    return {
      qus,
      curChoice,
      isShowAns,
      ansResultColor,
      uname,
      showAns
    }
  }
})
</script>

<style scoped>
.header {
  padding: 20px 0 20px 0;
}
.header .subject {
  height: 60px;
  width: 240px;
  color: #ffffff;
  background-color: #3498db;
  clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%, 15% 50%);
  padding: 10px;
  text-align: center;
  margin: auto;
}
.header .subject span {
  font-size: 2em;
}

.navi .sub span {
  cursor: pointer;
  display: inline-block;
  margin: 0 5px;
}

.navi .not-select span{
  border-bottom: 2px solid #aeb8c2;
  font-size: 1em;
}

.navi .selected span{
  font-size: 1.2em;
  padding: 2px 8px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #1abc9c;
}

.problem-pad {
  margin-top: 10px;
}

.problem-pad .problem {
  border-radius: 10px;
  padding: 0 15px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
}

.problem-pad .pad-header {
  margin-bottom: 18px;
}

.problem-pad .pad-header span{
  display: inline-block;
  font-size: 1.3em;
  padding: 0 5px;
  cursor: pointer;
}

.problem-pad .pad-header .op-color {
  background-color: #1abc9c;
}

.problem-pad .pad-header .disabled {
  background-color:#6f6e6e
}

.problem-pad .pad-header .op {
  margin-left: 10px;
  border-radius: 8px;
  color: white;
}

.problem-pad .problem .qus-info span {
  display: inline-block;
  font-size: 1.2em;
  margin-top: 5px;
}

.problem-pad .problem .qus-info span:not(:first-child) {
  margin-left: 10px;
}

.problem-pad .problem .choice {
  padding: 20px 0 10px 0;
}

.problem-pad .answer {
  border-radius: 10px;
  padding: 0 15px;
  box-shadow: rgba(170, 63, 63, 0.25) 0 3px 8px;
  margin: 25px 0;
  background-color: #f3f3f3;
}

.problem-pad .answer .provider {
  padding-top: 10px;
}
.problem-pad .answer .provider span{
  font-size: 1.2em;
  padding: 2px;
  font-weight: bold;
  letter-spacing: 1px;
}

</style>
